import React, { useEffect, useState } from 'react';
import { Upload, Modal, message } from 'antd';
import ImgCrop from 'antd-img-crop';
//  ImgCrop
import {
  RcUploadChangeParam,
  RcUploadFile
} from './interface';

import OSS  from '@/utils/aliyun-oss';
// import {ImgCrop} from "bluedot-antd/es/upload";

export default ({
  maxLength = 1,
  value,
  onChange,
  accept = 'image/png, image/jpeg',
  aspect,
  children,
  ...props
}: any) => {
  const [fileList, handleFileList] = useState<any[]>([]);
  const [previewVisible, handlePreviewVisible] = useState(false);
  const [previewImage, handlePreviewImage] = useState<string>('');

  useEffect(() => {
    if (value) {
      if (value instanceof Array) {
        handleFileList(value);
      } else if (value instanceof Object) {
        handleFileList([value]);
      }
    }
  }, [value]);

  const handlePreview = async (file: RcUploadFile) => {
    handlePreviewImage(file.url || file.preview);
    handlePreviewVisible(true);
  };

  const handleOnChange = ({ fileList, file }: RcUploadChangeParam) => {
    handleOnChangeFileList({ fileList, file });
  };

  const handleOnChangeFileList = ({
    fileList: filesList,
    file,
  }: RcUploadChangeParam) => {
    let newFileList;
    if (onChange) {
      if (maxLength == 1 && filesList.length) {
        if (!filesList[0]?.url && filesList[0]?.status == 'done') {
          filesList[0].url = OSS.setUploadFileUrl(filesList[0]).url;
					message.success('上传成功');
        }
        newFileList = {
          url: filesList[0].url,
          name: filesList[0].name,
          status: 'done',
          uid: filesList[0].uid,
          type: filesList[0].type,
          size: filesList[0].size,
        };
        onChange(newFileList);
        handleFileList([newFileList]);
      } else if (filesList.length) {
        newFileList = filesList.map(item => {
          if (!item?.url && item?.status == 'done') {
            item.url = OSS.setUploadFileUrl(item).url;
						message.success('上传成功');
          }
          return {
            url: item.url,
            name: item.name,
            status: 'done',
            uid: item.uid,
            type: item.type,
            size: item.size,
          };
        });
        onChange(newFileList);
        handleFileList(newFileList);
      } else {
        onChange(null);
        handleFileList([]);
      }
    }
  };

  const handleOnRemove = (file: RcUploadFile) => {
    const files = fileList.filter(v => v.url !== file.url);
    if (onChange) {
      handleFileList(files);
    }
  };

  const handleCancel = () => handlePreviewVisible(false);

  const uploadProps: any = {
    listType: 'picture-card',
    fileList: fileList,
    action: OSS.option.host,
    onChange: handleOnChange,
    onPreview: handlePreview,
    onRemove: handleOnRemove,
    data: OSS.getExtraData,
    accept: accept,
  };

  return (
    <>
      {aspect ? (
        <ImgCrop rotate aspect={aspect}>
          <Upload {...uploadProps} {...props}>
            {children ? children : fileList.length < maxLength && '+ Upload'}
          </Upload>
        </ImgCrop>
      ) : (
        <Upload {...uploadProps} {...props}>
          {children ? children : fileList.length < maxLength && '+ Upload'}
        </Upload>
      )}
      <Modal visible={previewVisible} footer={null} onCancel={handleCancel}>
        <img alt="example" style={{ width: '100%' }} src={previewImage} />
      </Modal>
    </>
  );
};
